<template>
	<view class="c-block-full">

		<view class="c-block">
			<view :style="paper.themequestionfont+';'+paper.themequestiondivstyle">
				<view v-if="paper.themequestionnoshow=='Y'" class="c-content block-inline" :style="paper.themequestionfont+';'+paper.themequestiondivstyle">{{index}}. </view>
				<view class="c-content block-inline" :style="paper.themequestionfont+';'+paper.themequestiondivstyle">{{field.csmwjtitle.value}}</view>
				<view class="block-inline a-score" :style="paper.themequestionfont+';'+paper.themequestiondivstyle" v-if="field.csmwjshowscore.showscore===true && field.csmwjshowscore.method==='oneanswer' && field.csmwjshowscore.oneanswer.score!=null">({{field.csmwjshowscore.oneanswer.score}} {{$t('csmwj.label.score')}})</view>
				<view class="block-inline a-required" :style="paper.themequestiondivstyle"v-if="field.csmwjrequired.value===true">*</view>
			</view>
			<view class="wrap">
				<u-row gutter="16">
					<u-col span="4"  v-for="(item,index) in field.csmwjimages.value" :key="index"><u-image width="100%" :src="item.url" mode="widthFix"></u-image></u-col>
				</u-row>
			</view>
			<view class="wrap">
				<u-radio-group v-model="val" @change="radioGroupChange" wrap  placement="column">
					<u-radio 
						v-for="(item, index) in field.__slot__.options" :key="index" 
						:label="item.value+ ((field.csmwjshowscore.showscore===true && field.csmwjshowscore.method==='everyscore' && item.score!=null)?(' ('+item.score+' '+$t('csmwj.label.score')+')'):'')"
						:name="item.value"
						:data-score="item.score"
						shape="circle"
						:customStyle="{margin: '4px'}"
						:labelColor="(paper.themeoptionsfontcolor!=null&&paper.themeoptionsfontcolor!='')?paper.themeoptionsfontcolor:''"
						:activeColor="(paper.themeoptionsselectedcolor!=null&&paper.themeoptionsselectedcolor!='')?paper.themeoptionsselectedcolor:''"
					>
					</u-radio>
				</u-radio-group>		
			</view>
			<view class="c-errormsg" v-if="errormsg!=null">{{errormsg}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'c-parsefg-csmwj-radio-group',
		props: {
			field: {
				type: Object
			},
			paper: {
				type: Object
			},
			index: {
				type: Number
			},
		},
		data() {
			return {
				val: null,
				errormsg: null,
				inputClass: "c-normalinput",
			};
		},
		mounted() {
			let that = this;
			that.cinit();
		},
		methods: {
			/**
			 * spa. 将__answer__ 初始化到页面显示(用于未完成续答)
			 */
			cinit:function(){
				let that = this;
				that.val = that.field.__answer__.value;
			},
			__submit:function(){
				let that = this;
				let field = that.field;

				if(field.csmwjrequired.value===true && (that.val==null || that.val=="")){
					that._setErrorMsg(that.$t('csmwj.validate.required'));
					return false;
				}
				that._setOkMsg();
				//return {value:that.val};
				return that.__getVal();
			},
			__getVal:function(){
				let that = this;
				return {value:that.val};
			},
			radioGroupChange:function(){
				
			},
			_setErrorMsg: function(msg) {
				let that = this;
				that.errormsg = msg;
				that.inputClass = "c-errorinput";
			},
			_setOkMsg: function() {
				let that = this;
				that.errormsg = '';
				that.inputClass = "c-normalinput";
			},
		}
	};
</script>

<style scoped lang="scss">;
.a-required{
	padding-left:10px;
	color: red;
	font-weight: bold;
}
.a-score{
	padding-left:10px;
}
.u-radio-group{
	width:100%;
}

</style>